<template>
    <h1>权限分配</h1>
    <el-table :data="roles" style="width: 100%">
        <el-table-column fixed prop="name" label="角色" width="150" />
        <el-table-column prop="description" label="描述" width="120" />
        <el-table-column prop="createTime" label="创建时间" width="" />

        <el-table-column fixed="right" label="操作" width="120">
        <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.$index)">编辑权限</el-button>
            <el-button link type="primary" size="small">Edit</el-button>
        </template>
        </el-table-column>
    </el-table>


    <el-dialog v-model="isDialogForm" :title="roleId.name">
        <el-tree 
            :data="permiss" 
            :props="defaultProps" 
            node-key="id"
            :default-checked-keys="navigations" 
            :default-expanded-keys="[2, 3]"
            @check="currentChecked"
            show-checkbox />

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="isDialogForm = false;roleId={}">取消</el-button>
                <el-button type="primary" @click="savePermiss">确认</el-button>
            </span>
        </template>
    </el-dialog>

</template>

<script>
import {getRoleList,getRoleNavigationBar,getPermissionTree,putPermission} from '../../api/api'
export default({
    data(){
        return{
            roleId:{},
            roles:[],
            isDialogForm:false,
            permiss:[],
            defaultProps:{
                children: 'children',
                label: 'label',
                disabled: 'disabled',
            },
            navigations:[],
            checkeds:[]
        }
    },
    methods:{
        /**获取角色列表 */
        getRoles(){
            let _this = this;
            let para = {
                page:1
            }
            getRoleList(para).then(res=>{
                if(res.success){
                    //console.log(res.response.data);
                    _this.roles = res.response.data;
                }else{
                    _this.$message({
                        message: "获取角色信息失败！",
                        type: 'error'
                    });
                }
                
            })
        },
        /**获取角色权限 */
        getNavigationBar(rid){
            let _this = this;

            let param = {
                rid:rid
            }
            _this.navigations = [];
            _this.getPermission();

            getRoleNavigationBar(param).then(res=>{
                if(res.success){
                    _this.navigations = res.response;
                    _this.checkeds = _this.navigations;
                    //console.log('getRoleNavigationBar',res);
                    //console.log(_this.navigations)
                }else{
                    _this.$message({
                        message: "获取角色信息失败！",
                        type: 'error'
                    });
                }
            })
            
            
        },
        /**获取所有菜单 */
        getPermission(){
            let _this = this;

            getPermissionTree().then(res=>{
                if(res.success){
                    _this.permiss = res.response.children;
                    //console.log(_this.permiss);
                }else{
                    _this.$message({
                        message: "获取菜单失败！",
                        type: 'error'
                    });
                }
            })
        },
        /**编辑权限 */
        handleClick(index){
            //console.log(this.roles[index].id)
            this.roleId = this.roles[index];
            this.getNavigationBar(this.roles[index].id);
            this.isDialogForm = true;
        },
        /**确定修改 */
        savePermiss(){
            let _this = this;
            let param = {
                rid:_this.roleId.id,
                pids:_this.checkeds
            }
            putPermission(param).then(res=>{
                if(res.success){
                    this.isDialogForm = false;
                    _this.$message({
                        message: "保存成功",
                        type: 'success'
                    });
                }else{
                    _this.$message({
                        message: res.msg? res.msg:'保存失败！',
                        type: 'error'
                    });
                }
            });
        },
        /**点击节点复选框之后触发 */
        currentChecked(nodeObj,SelectedObj){
            this.checkeds = SelectedObj.checkedKeys;
            //console.log('SelectedObj',SelectedObj);
            //console.log('SelectedObj.checkedKeys',SelectedObj.checkedKeys);
            //console.log('SelectedObj.checkedNodes',SelectedObj.checkedNodes);
        }
    },
    mounted(){
        this.getRoles();
        //this.getPermission();
    }
})
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>